<template>
  <div class="contract-management">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form" label-width="80px">
      <el-form-item label="合同编号">
        <el-input v-model="searchForm.contractId" placeholder="请输入合同编号" clearable />
      </el-form-item>
      <el-form-item label="货主">
        <el-input v-model="searchForm.owner" placeholder="请输入货主" clearable />
      </el-form-item>
      <el-form-item label="合同类型">
        <el-input v-model="searchForm.contractType" placeholder="请输入合同类型" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 合同表格 -->
    <el-table :data="contractDetails" style="width: 100%" v-loading="loading">
      <el-table-column label="合同编号" prop="contractId"></el-table-column>
      <el-table-column label="港口" prop="port"></el-table-column>
      <el-table-column label="货主" prop="owner"></el-table-column>
      <el-table-column label="合同类型" prop="contractType"></el-table-column>
      <el-table-column label="货类" prop="cargoType"></el-table-column>
      <el-table-column label="签订日期" prop="signDate"></el-table-column>
      <el-table-column label="生效日期" prop="effectDate"></el-table-column>
      <el-table-column label="合同状态" prop="status"></el-table-column>
      <el-table-column label="到验号" prop="uniqueCode"></el-table-column>
      <el-table-column label="船名" prop="shipName"></el-table-column>
      <el-table-column label="单价" prop="price"></el-table-column>
      <el-table-column label="单位" prop="unit"></el-table-column>
<!--      <el-table-column label="合同原件" prop="contractUrl"></el-table-column>-->
      <el-table-column
        label="合同原件"
        align="center"
        prop="contentUrl">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
          >下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" size="mini">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改合同弹窗 -->
    <el-dialog :title="'修改合同'" :visible.sync="open">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="合同编号" prop="contractId">
          <el-input v-model="form.contractId" disabled></el-input>
        </el-form-item>
        <el-form-item label="港口" prop="port">
          <el-input v-model="form.port"></el-input>
        </el-form-item>
        <el-form-item label="货主" prop="owner">
          <el-input v-model="form.owner"></el-input>
        </el-form-item>
        <el-form-item label="货类" prop="owner">
          <el-input v-model="form.cargoType"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-input v-model="form.contractType"></el-input>
        </el-form-item>
        <el-form-item label="签订日期" prop="signDate">
          <el-date-picker v-model="form.signDate" type="date" placeholder="请选择签订日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="生效日期" prop="effectDate">
          <el-date-picker v-model="form.effectDate" type="date" placeholder="请选择生效日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="合同状态" prop="status">
          <el-input v-model="form.status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getContractById, getContractByOwnerAndType, updateContract } from "@/api/fabricBussinessContract/fabricBussinessContract";

export default {
  name: "fabricBussinessContract",
  data() {
    return {
      loading: false,
      contractDetails: [],
      searchForm: {
        contractId: '',
        owner: '',
        contractType: ''
      },
      form: {
        contractId: null,
        port: '',
        owner: '',
        contractType: '',
        signDate: '',
        effectDate: '',
        status: ''
      },
      open: false,
      rules: {
        port: [{ required: true, message: "请输入港口", trigger: "blur" }],
        owner: [{ required: true, message: "请输入货主", trigger: "blur" }],
        contractType: [{ required: true, message: "请输入合同类型", trigger: "blur" }]
      }
    };
  },
  methods: {
    /** 查询合同详情 */
    handleSearch() {
      const { contractId, owner, contractType } = this.searchForm;
      if (contractId) {
        getContractById(contractId).then(response => {
          this.contractDetails = [response]
          console.log("响应结构检查：", {
            '原始response': response,
            'response.data': response.data,
            'response.result': response.headers,
            'response.result2': response.statusText,
          });
        }).catch(() => {
          this.$message.error("获取合同详情失败");
        });
      } else if (owner && contractType) {
        getContractByOwnerAndType(owner, contractType).then(response => {
          this.contractDetails = response.data ? [response.data] : [];
        }).catch(() => {
          this.$message.error("获取合同详情失败");
        });
      } else {
        this.$message.warning("请输入合同编号或货主和合同类型");
      }
    },

    /** 重置查询 */
    resetSearch() {
      this.searchForm = { contractId: '', owner: '', contractType: '' };
      this.contractDetails = [];
    },

    /** 修改合同 */
    handleEdit(row) {
      this.form = { ...row };
      this.open = true;
    },
    handleDownload(row){
      // var name = row.fileName;
      var url = row.contentUrl;
      this.$download.resource(url,false)
    },

    /** 提交修改 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateContract(this.form).then(() => {
            this.$message.success("合同修改成功");
            this.open = false;
            this.handleSearch();  // 重新查询
          }).catch(() => {
            this.$message.error("合同修改失败");
          });
        }
      });
    },

    /** 取消修改 */
    cancel() {
      this.open = false;
    }
  }
};
</script>
